<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text">
    <button onclick="singleTest()">单线程测试</button>
    <button onclick="workerTest()">多线程测试</button>
    <script>
      const number = 20;
      // 多线程测试
      // 多线程测试
      function workerTest() {
        console.log("%c 开始多线程测试 ", "color:#fff; background:#00897b ");
        const workerList = [];
        for (var i = 0; i < number; i++) {
          const workerItem = new Promise((resolve, reject) => {
            // 创建一个子线程
            const worker = new Worker("worker.js");
            worker.postMessage({
              function: "fb",
              data: 43,
            });
            worker.onmessage =  (e) => {
              console.log(e.data);
              resolve(e.data);
              // 关闭worker线程
              worker.terminate();
            };
          });
          workerList.push(workerItem)
        }
        console.time('多线程执行时间')
        Promise.all(workerList).then(res=>{
          console.log(res);
          console.timeEnd('多线程执行时间')
        })
      }
      // 单线程测试
      function singleTest() {
        console.log("%c 开始单线程测试 ", "color:#fff; background:#00897b ");
        function fb(n) {
          if (n === 1 || n === 2) {
            return 1;
          }
          return fb(n - 1) + fb(n - 2);
        }
        console.time("单线程执行时间");
        for (let i = 0; i < number; i++) {
          const res = fb(43);
          console.log({
            data: res,
            name: "single test",
          });
        }
        console.timeEnd("单线程执行时间");
      }
    </script>
  </body>
</html>
